<!-- 收件箱 -->
<template>
	<div id="Inbox">
		<div class="content">
			<ul v-infinite-scroll="loadMore"
			  	infinite-scroll-disabled="loading"
			 	infinite-scroll-distance="10">
				<li class="list" v-if="isAllLoad" v-for="(list,index) in inBoxList" :key="index" @click="toApp('MailReceiveAct')">
					<div class="icon">
						<i class="iconfont icon-youjian" v-if="show"></i>
						<i class="iconfont icon-youjian1" v-else></i>
					</div><div class="Inbox-data">

						<div class="title">{{list.mailTitle}}</div>
						<div class="bottom">
							<span class="sender">发件人:{{list.userName}}</span>
							<span class="time">时间:{{list.mailSendTime}}</span>
							<!-- <span class="status">状态:已读</span> -->
						</div>
						<div class="status"><i class="iconfont icon-weidu1" v-if="show"></i><i class="iconfont icon-ryes" v-else></i></div>
					</div>
				</li>
				<!--底部判断是加载图标还是提示“全部加载”-->
				<div class="more_loading" v-show="!queryLoading">
					<mt-spinner type="snake" color="#00ccff" :size="20" v-show=" loading && !allLoaded">加载中</mt-spinner>
					<span v-show="allLoaded">全部加载</span>
				</div>
				<li class="nocourse" v-if="nodata && isAllLoad"><i class="iconfont icon-zanwu"></i><p>暂无数据</p></li>
			</ul>
		</div>
	</div>
</template>

<script>
	import verify from '@/assets/js/verificationMixin'
	import { mapState, mapMutations } from 'vuex'
	export default {
		name:'Inbox',
  		mixins:[verify],
		data(){
			return {
			    phone:this.$route.query.phone,
			    isAllLoad:false,
				inBoxList:[],
				page  : 0,
				loading:false,
				allLoaded:false,
				queryLoading: false,
				pageSize:5,
				show:false,
				nodata:false,
			}
		},
		computed: {
			...mapState(['userPhone']),
		},
		methods:{
			...mapMutations([
		    	'toApp'
		    ]),
			loadMore() {
				let _self=this;
				if(_self.allLoaded){
				    _self.loading = true;
				    return;
			    }
			    if(_self.queryLoading){
			    	return;
			    }
			    _self.loading = !_self.queryLoading;
				_self.inBoxList=[];
				_self.page++;
				_self.getInBox();
			},
			// // 获取一邮件列表
			getInBox(){
				let _self=this;
				let uri =  'mailAjax/mailReceive!queryMailList.action'
				_self.$_get( uri , { 
		  			'page'         :_self.page,
				    'rows'         :_self.pageSize,
				    'userPhone'    :_self.phone,
		  		})
		  		.then(function(res) {
		  			let data = res;
		            _self.inBoxList=_self.inBoxList.concat(data.gridModel);
		            if(_self.page==1 && data.gridModel.length==0){
						_self.nodata = true;
						_self.queryLoading =true;
						_self.loading = true;
					}else{
						_self.nodata = false;
						if(data.gridModel.length > 0){
							_self.loading = false;
							_self.queryLoading =false;
							if(data.gridModel.length < _self.pageSize){
								_self.allLoaded = true;
							}
						}else if(data.gridModel.length == 0){
							_self.loading = true;
							_self.allLoaded = true;
						}
					}
					_self.isAllLoad = true;
					_self.$forceUpdate();
		  		})
			},
		},
		mounted(){
			this.$_verifyConfig();
			dd.ready(function(){
		        dd.biz.navigation.setTitle({
		            title: '收件箱',//标题
		            onSuccess : function(result) {},
		            onFail : function() {}
		        });
		    })
		},
	}
</script>

<style lang="less">
	#Inbox{
		background: #f5f5f5;
		width: 100%;
		height: 100%;
		max-width: 10rem;
		padding: 0 30px;
		.content{
			width: 100%;
			ul{
				text-align: center;
				width: 100%;
				.list{
					width: 100%;
					background: #fff;
					margin: 20px 0;
					border-radius: 10px;
					overflow: hidden;
					padding: 20px;
					box-sizing: border-box;
					position: relative;
					.icon{
						width: 12%;
						display: inline-block;
						vertical-align: top;
						line-height: 80px;
						text-align: left;
						i{
							font-size: 50px; /* px */
							color: #decc53;
						}
					}
					.Inbox-data{
						text-align: left;
						width: 88%;
						display: inline-block;
						vertical-align: top;
						.title{
							color: #222;
							font-weight: 600;
							font-size: 32px; /* px */
							margin-bottom: 10px;
							line-height: 50px;
							padding-right: 20px;
							box-sizing: border-box;
						}
						.bottom{
							color: #666;
							font-size: 24px;  /* px */
							>span{
								margin-right: 10px;
							}
						}
					}
					.status{
						position: absolute;
						right: 0;
						top: 0;
						i{
							font-size: 66px;  /* px */
							color: #00ab65;
						}
						.icon-ryes{
							color: #999;
						}
					}
				}
				.more_loading{
					text-align: center;
				}
			}
		}
		.nocourse{
			margin-top: 200px;
			.iconfont{
				font-size: 180px;  /* px */
				color: #999;
			}
			p{
				color: #999;
				font-size: 22px;
				line-height: 80px;
			}
		}
	}
</style>